import React, { useEffect, useState } from "react";
import QueueAnim from "rc-queue-anim";
import '../styles/index.less';
import LazyLoad from 'react-lazyload';
import { Row, Col } from "antd";
import { ImageViewer } from 'antd-mobile';
import { enquireScreen } from 'enquire-js';

const Retail = ({ dataSource, ...props }) => {
  const [visible, setVisible] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;

  const goViewPic = () => {
    setVisible(true);
  }

  return (
    <div className="retail">
      <div {...currentProps} className="retail-banner finance-banner">
        <QueueAnim
          key="QueueAnim"
          type={["bottom", "top"]}
          className='banner-text-wrapper'
          delay={200}
        >
          <p className="banner-title">金融大数据</p>
          <p className="banner-describe">
          金融行业是实时场景最为丰富的行业之一，用户行为的实时分析、实时营销、实时风控、实时反欺诈等场景的落地都强依赖于实时数仓技术，顺丰科技云原生实时数据湖，面向金融客户提供实时数仓、存算分离、弹性伸缩等核心能力，在大幅减低资源消耗的前提下，满足业务场景实时化需求，助力金融客户降本增效。
          </p>
        </QueueAnim>
      </div>
      <div className='retail1-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>行业痛点</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='case-list'>
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeItemIcon1.png'/>
                    <div>
                      <p className='title'>实时场景徒增</p>
                      <p className='desc'>金融行业以前大部分指标是离线处理，随着行业的快速互联网化，急需实时数仓技术，实现营销、风控等场景的实时化。</p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeItemIcon2.png'/>
                    <div>
                      <p className='title'>数据架构落后</p>
                      <p className='desc'>传统实时计算框架，存在中间结果没有沉淀，计算的复用性较差，开发成本随着需求增加直线上升的弊端。</p>
                    </div>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeItemIcon3.png'/>
                    <div>
                      <p className='title'>IT资源大量浪费</p>
                      <p className='desc'>金融行业具备季节性属性，业务高峰时后台计算资源需求成本增长，扩充IT资源耗资巨大且浪费</p>
                    </div>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>

      <div className='retail2-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>解决方案架构</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='pic'>
            <LazyLoad>
              {isMobile ? 
                <img onClick={goViewPic} src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeSolution.png'></img>:
                <img src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeSolution.png'></img>
              }
            </LazyLoad>
          </div>
        </div>
      </div>

      <div className='retail3-wrapper'>
        <div className="c-grid-layout">
          <div className='case-top'>
            <div>
              <span className='case-title'>方案优势</span>
              <div className='case-line'></div>
            </div>
          </div>
          <div className='case-list'>
            <div className="list-inner">
              <Row>
                <Col xs={24} md={8}>
                  <div className='item'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeList1.png'/>
                    </LazyLoad>
                    <p className='title'>基于Hudi架构的内核优化</p>
                    <p className='subtitle'>基于Hudi升级后大幅提升的数仓更新时效，由原来的“天”级别提升到“分钟”级别。</p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item item2'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeList2.png'/>
                    </LazyLoad>
                    <p className='title'>自研缓存系统</p>
                    <p className='subtitle'>基于share-nothing和一致性hash架构自研缓存系统，支持列级别细粒度，相比于文件级别缓存，能够以其1%的内存量缓存超过其10倍的数据量。</p>
                  </div>
                </Col>
                <Col xs={24} md={8}>
                  <div className='item item3'>
                    <LazyLoad>
                      <img className='icon' src='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeList3.png'/>
                    </LazyLoad>
                    <p className='title'>产品稳定成熟</p>
                    <p className='subtitle'>产品的稳定性、易用性已被充分验证。可为金融客户大幅降低运维成本。</p>
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </div>
      <ImageViewer
        image='https://sfservices.obs.cn-south-1.myhuaweicloud.com/sdp-web/startshinex/financeSolution.png'
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </div>
  );
};

export default Retail;
